import {Component} from "react";

//生命周期函数
//state
class One extends Component{
//    constructor(props){
//       super(props);
//       this.state={
//         n:100,
//         arr:[1,2,3,4]
//       }
//    }
   state={
      n:100,
      m:520,
      arr:[1,2,3,4]
   }
   changeN(){
      //console.log(this);//undefined
      //console.log(this);//让this--->One这个类

      //数据会变，但是页面不会更新
    //   this.state.n=200;
    //   console.log(this.state);
    //   this.forceUpdate();//强制更新页面
 
    // 修改 state的值，要通过 setState(对象,回调函数)来修改
    //    this.setState({
    //      n:300
    //    },()=>{
    //     console.log("修改成功！");
    //    })
      
      
      //要给数值加一，要用 n:this.state.n+1   n:++this.state.n
      //不能用 n:this.state.n++
        this.setState({
            n:this.state.n++
        },()=>{
        console.log("修改成功！");
        })
   }
   changeM=()=>{
    console.log(this);//One这个类
   }
   render(){
     let {n,arr}=this.state;
     return <div>
       <h1>类组件--{n}--{arr}</h1>
       <button onClick={this.changeN.bind(this)}>修改n</button>
       <button onClick={this.changeM}>修改m</button>
     </div>
   }
}


//导出类组件
export default One;